<template>
  <div class="project-cost">
    <FilterTool
      v-if="!showMobilePage"
      ref="FilterToolRef"
      v-model="paramsObj"
      :filter-list="filterList"
      :is-show-filter="isShowFilter"
      show-search-btn
      @handelClick="queryClick"
      @queryEmpty="queryEmpty"
    />
    <div v-if="costNumList && (costNumList.length > 1 || showMobilePage)" class="statistics-total">
      <dataDisplay :data-list="handelDataList(costNumList)" />
    </div>
    <div style="align-items: center;display: flex; margin-bottom:8px">
      <div style="align-items: center;display: flex;flex:1; margin-top:12px">
        <div><Title title="成本列表"/></div>
        <div v-if="!showMobilePage" class="project-cost-data-list">
          <dataDisplay v-if="costNumList && costNumList.length === 1" :data-list="[{ label: costNumList[0].name, data: costNumList[0].num / 100, icon: icon1, width: '200px' }]" />
        </div>
        <el-checkbox v-model="isShow" :true-label="1" :false-label="0" style="margin-left: 16px;display:flex;align-items:center;" @change="showSupplier">
          <span style="align-items: center;display: flex;">
            按供应商展示
            <el-tooltip effect="dark" placement="top">
              <div slot="content" style="max-width: 150px;">
                选择按供应商显示会默认把同一个供应商的税率设为同一个值，该值默认获取列表最早设定的供应商可抵扣税率值
              </div>
              <tipIcon style="margin-left: 5px" is-diy class="custom-table-header"/>
            </el-tooltip>
          </span>
        </el-checkbox>
      </div>
      <template v-if="!showMobilePage">
        <MoreOpeator
          v-if="detailData.projectStatus <= 1 && (hasRouteAuth('crm:projectInfo:addCost') || hasRouteAuth('crm:projectInfo:delCost'))"
          :list="[
            {label: '批量新增', auth: hasRouteAuth('crm:projectInfo:addCost')},
            {label: '批量编辑', auth: hasRouteAuth('crm:projectInfo:addCost')},
            {label: '批量删除', auth: hasRouteAuth('crm:projectInfo:delCost')}
          ]"
          :handel-click="moreOpeatorClick"
          label="批量操作"
          style="margin-right:10px;"
        />
        <el-button
          v-if="(hasRouteAuth('crm:projectInfo:addCost') || isAdmin) && [0, 1].includes(detailData.projectStatus)"
          class="search-btn-style"
          type="primary"
          size="small"
          plain
          style="padding: 7px 12px"
          @click="addCostItem">
          新建成本
          <i class="el-icon-plus" />
        </el-button>
      </template>
    </div>
    <el-table
      v-if="list.items.length > 0 && costAuth"
      ref="costTableRef"
      :data="list.items"
      class="fb-table"
      element-loading-text="加载中..."
      empty-text="暂无数据"
      header-cell-class-name="order-data-header-cell"
      fit
      hightlight-current-row
      @selection-change="handleSelectionChange">
      <el-table-column
        :selectable="selectable"
        align="left"
        type="selection"
        width="55"
      />
      <el-table-column v-if="!isShow" :key="'1-projectCost'" align="left" label="序号" type="index" width="50" />
      <el-table-column v-if="!isShow" align="left" label="成本编号" width="180">
        <template slot-scope="scope">
          <div class="light-word" @click="toCostDetail(scope.row)">
            <ToolTip :content="scope.row.costNum"/>
          </div>
        </template>
      </el-table-column>
      <el-table-column v-if="!isShow" :key="'2-projectCost'" align="left" label="成本项" width="120">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.costItemName"/>
        </template>
      </el-table-column>
      <el-table-column v-if="!isShow" :key="'3-projectCost'" align="left" label="说明" min-width="230">
        <template slot-scope="scope">
          <ToolTip v-if="scope.row.costExplain && !scope.row.orderObj" :content="scope.row.costExplain"/>
          <div v-else-if="scope.row.orderObj">
            <div>
              订单：
              <ToolTip :content="scope.row.orderObj.orderId" is-can-click @handelClick="toProjectChildDetail(scope.row)" />
            </div>
            <div>{{ scope.row.orderObj.costStr }}</div>
          </div>
          <div v-else>--</div>
        </template>
      </el-table-column>
      <el-table-column :key="'4-projectCost'" align="left" label="供应商" width="150">
        <template slot-scope="scope">
          <div v-if="scope.row.supplier && scope.row.supplier.name" class="light-word" @click="toSupplierDetail(scope.row)">
            <ToolTip :content="scope.row.supplier.name"/>
          </div>
          <div v-else>--</div>
        </template>
      </el-table-column>
      <el-table-column :key="'5-projectCost'" align="left" label="可抵扣税率" width="150" min-width="110">
        <template slot-scope="scope">
          <div v-if="scope.row.discount !== null">
            <span>{{ scope.row.discount }}%</span>
            <span v-if="!scope.row.isAuto">(手动)</span>
          </div>
          <div v-else>--</div>
        </template>
      </el-table-column>
      <el-table-column v-if="isShow" :key="'6-projectCost'" align="right" label="总成本(元)" width="130">
        <template slot-scope="scope">
          <PriceColumn :real-val="scope.row.costTotal" :price="scope.row.costTotal" />
        </template>
      </el-table-column>
      <el-table-column v-if="isShow" :key="'7-projectCost'" align="left" label="成本项数量" width="110">
        <template slot-scope="scope">
          <div v-if="scope.row.costTypeTotal && scope.row.supplier && scope.row.supplier.name" style="cursor: pointer;color: #406EFF;" @click="toCostList(scope)">{{ scope.row.costTypeTotal }}</div>
          <div v-else-if="scope.row.costTypeTotal && !(scope.row.supplier && scope.row.supplier.name)">{{ scope.row.costTypeTotal }}</div>
          <div v-else>--</div>
        </template>
      </el-table-column>
      <el-table-column v-if="isShow" :key="'8-projectCost'" align="left" label="订单数量" width="110">
        <template slot-scope="scope">
          <div v-if="scope.row.orderTotal && scope.row.supplier && scope.row.supplier.name" style="cursor: pointer;color: #406EFF;" @click="toOrderList(scope)">{{ scope.row.orderTotal }}</div>
          <div v-else-if="scope.row.orderTotal && !(scope.row.supplier && scope.row.supplier.name)">{{ scope.row.orderTotal }}</div>
          <div v-else>--</div>
        </template>
      </el-table-column>
      <el-table-column v-if="!isShow" :key="'9-projectCost'" align="right" label="含税成本(元)" width="130">
        <template slot-scope="scope">
          <PriceColumn :real-val="scope.row.costAmount" :price="scope.row.costAmount / 100" />
        </template>
      </el-table-column>
      <el-table-column align="left" label="审批状态" width="80">
        <template slot-scope="scope">
          <div v-if="scope.row.approvalStatus || scope.row.approvalStatus === 0" :style="{color: getColor(scope.row.approvalStatus)}">
            {{ scope.row.approvalStatus | costApprovalStatus }}
          </div>
          <div v-else>--</div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="结算状态" width="90">
        <template slot-scope="scope">
          <div
            v-if="scope.row.settlementStatus === 0 || scope.row.settlementStatus"
            :class="{'light-word': scope.row.settlementStatus === 1 || scope.row.settlementStatus === 2}"
            @click="toSettleDetail(scope.row)">
            {{ scope.row.settlementStatus | settlementStatusFilter }}
          </div>
          <div v-else>--</div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="审批时间" width="160" prop="approvalDate">
        <template slot-scope="scope">
          <div v-if="scope.row.approvalDate">{{ scope.row.approvalDate | standardFormat('YYYY/MM/DD HH:mm:ss') }}</div>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column v-if="!isShow" align="left" label="申请人" width="100">
        <template slot-scope="scope">
          <CheckUserInfo :user-id="scope.row.proposerId" :label="scope.row.proposer" />
        </template>
      </el-table-column>
      <el-table-column v-if="!isShow" :key="'10-projectCost'" align="left" label="创建人" width="100">
        <template slot-scope="scope">
          <CheckUserInfo :user-id="scope.row.creatorId" :label="scope.row.creator" />
        </template>
      </el-table-column>
      <el-table-column v-if="!isShow" :key="'11-projectCost'" align="left" label="创建时间" min-width="170">
        <template slot-scope="scope">
          {{ scope.row.createrDate | standardFormat('YYYY/MM/DD HH:mm:ss') }}
        </template>
      </el-table-column>
      <el-table-column v-if="!isShow" :key="'12-projectCost'" align="left" width="80" label="操作" fixed="right">
        <template slot-scope="scope">
          <div v-if="!scope.row.orderObj && (scope.row.projectStr !== '外部媒介' || scope.row.projectStr !== '内部媒介')">
            <!-- (有供应商 && 成本结算状态为待结算 && 有结算发起权限) ||
              (有添加成本项权限 && 项目订单为待提交或待初审 && 成本结算状态为待结算或已忽略) ||
              (有删除成本项权限 && 项目订单为待提交或待初审 && 成本结算状态为待结算或已忽略)
            -->
            <el-dropdown
              v-if="
                (scope.row.supplier && scope.row.supplier.id && scope.row.settlementStatus === 0 && hasRouteAuth('medium:supplierAudit:launch')) ||
                  (hasRouteAuth('crm:projectInfo:addCost') && [0, 1].includes(detailData.projectStatus) && [0, 5].includes(scope.row.settlementStatus)) ||
                  (hasRouteAuth('crm:projectInfo:delCost') && [0, 1].includes(detailData.projectStatus) && [0, 5].includes(scope.row.settlementStatus))
              "
            >
              <div class="el-dropdown-link" style="cursor:pointer;">
                <img :src="setting" alt="操作">
              </div>
              <el-dropdown-menu
                slot="dropdown"
                class="dropdown-wrap">
                <el-dropdown-item v-if="canApproval(scope.row)" @click.native="costApprovalDialog(-1, scope.row)">
                  <div>审批</div>
                </el-dropdown-item>
                <el-dropdown-item v-if="scope.row.supplier && scope.row.supplier.id && scope.row.settlementStatus === 0 && hasRouteAuth('medium:supplierAudit:launch')" style="width:80px;text-align: center" @click.native="toSettlement(scope.row)">
                  <div>结算</div>
                </el-dropdown-item>
                <!-- 可以操作编辑：成本审批状态待审批或未过审 && (有添加成本项权限 && 项目订单为待提交或待初审 && 成本结算状态为待结算或已忽略)-->
                <el-dropdown-item
                  v-if="scope.row.approvalStatus !== 1 && (
                    hasRouteAuth('crm:projectInfo:addCost') && [0, 1].includes(detailData.projectStatus) && [0, 5].includes(scope.row.settlementStatus)
                  )"
                  style="width:80px;text-align: center"
                  @click.native="toEdit(scope)">
                  <div>编辑</div>
                </el-dropdown-item>
                <!-- 可以操作删除：有删除成本项权限 && 项目订单为待提交或待初审 && 成本结算状态为待结算或已忽略 && 成本审批状态待审批或未过审 && 当前用户为创建人-->
                <el-dropdown-item
                  v-if="scope.row.creatorId === userInfo.id || (hasRouteAuth('crm:projectInfo:delCost') && [0, 1].includes(detailData.projectStatus) && [0, 5].includes(scope.row.settlementStatus) && scope.row.approvalStatus !== 1)"
                  :disabled="![0, 5].includes(scope.row.settlementStatus)"
                  style="width:80px;text-align: center"
                  @click.native="toDel(scope)">
                  <div>删除</div>
                </el-dropdown-item>
                <el-dropdown-item v-if="canApprovalCancel(scope.row)" @click.native="costApprovalDialog(0, scope.row)">
                  <div>撤销审批</div>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </template>
      </el-table-column>
      <el-table-column v-if="isShow" :key="'13-projectCost'" align="left" width="80" label="操作" fixed="right">
        <template slot-scope="scope">
          <!-- (有添加成本项权限 || 管理员) && 项目订单为待提交或待初审 && 有供应商 -->
          <el-button v-if="(hasRouteAuth('crm:projectInfo:addCost') || isAdmin) && [0, 1].includes(detailData.projectStatus) && (scope.row.supplier && scope.row.supplier.name)" type="text" size="small" @click="toEditDiscount(scope)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <empty-placeholder v-else :text="costAuth?'暂无数据':'暂无权限'" style="margin-bottom: 32px" />
    <el-row type="flex" justify="end" class="pagination-area">
      <el-pagination
        v-show="list.total > 0"
        :current-page="list.page"
        :page-size="list.perPage"
        :total="list.total"
        :page-sizes="[20, 50, 100, 250, 500]"
        :layout="showMobilePage?'total, prev, next, jumper':'total, prev, pager, next, sizes, jumper'"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </el-row>
    <div v-if="showMobilePage" class="mobile-tool">
      <FilterTool
        ref="FilterToolRef"
        v-model="paramsObj"
        :filter-list="filterList"
        :is-show-filter="isShowFilter"
        show-search-btn
        show-mobile-icon
        @handelClick="queryClick"
        @queryEmpty="queryEmpty"
      />
      <MoreOpeator
        v-if="detailData.projectStatus <= 1 && (hasRouteAuth('crm:projectInfo:addCost') || hasRouteAuth('crm:projectInfo:delCost'))"
        :list="[
          {label: '批量新增', auth: hasRouteAuth('crm:projectInfo:addCost')},
          {label: '批量编辑', auth: hasRouteAuth('crm:projectInfo:addCost')},
          {label: '批量删除', auth: hasRouteAuth('crm:projectInfo:delCost')}
        ]"
        :handel-click="moreOpeatorClick"
        show-mobile-icon
        label="批量操作"
      />
      <createBtn
        v-if="(hasRouteAuth('crm:projectInfo:addCost') || isAdmin) && [0, 1].includes(detailData.projectStatus)"
        mobile-table
        @click.native="addCostItem"/>
    </div>
    <batchCreateDialog ref="batchCreateDialogRef" :project-id="projectId" request-type="cost" @freshData="freshData" />
    <create-income-dialog ref="createIncomeDialog" :is-cost="true" :is-submit="isSubmit" :btn-loading="btnLoading" @addItem="addItem" @editItem="editItem" @success="success" />
    <DiscountDialog ref="discountDialog" :project-id="projectId" :supplier-name="supplierName" @getDetail="getDetail" @success="fetchData()"/>
    <!-- 成本审核 -->
    <CostApprovalDialog
      ref="costApproval"
      :cost-ids="costIds.toString()"
      :type="approvalType"
      :is-batch="0"
      @costApprovalhandle="success" />
  </div>
</template>
<script>
import icon1 from '@/assets/dataDisplay/icon_28.png';
import setting from '@/assets/setting.png';
import FilterTool from '@/components/Tool/filter';
import Title from '@/components/Title';
import EmptyPlaceholder from '@/components/Common/baseComponent/emptyIcon';
import MoreOpeator from '@/components/Common/baseComponent/moreOpeator';
import batchCreateDialog from './model/batchCreateDialog';
import CreateIncomeDialog from './model/createIncomeDialog';
import DiscountDialog from './model/discountDialog';
import { getCostList, getCostNum, costDel, costAdd, costEdit, batchDeleteCost } from '@/api/project';
import { costList } from '@/api/config';
import { bigDataFilter, moneyFilter } from '@/filters/number';
import { standardFormat } from '@/filters/date';
import { hasRouteAuth } from '@/utils/permission';
import { settlementStatusFilter, costApprovalStatus } from '@/filters/status';
import isAdmin from '@/mixins/isAdmin';
import costSet from '@/mixins/costSet';
import costOperate from '@/mixins/costToUrl';
import { paramsRangeFormat } from '@/utils/paramsFormat';
import dataDisplay from '@/components/Common/baseComponent/dataDisplay';
import { mapState } from 'vuex';
import createBtn from '@/components/Common/baseComponent/createBtn';

export default {
  components: {
    Title, CreateIncomeDialog, dataDisplay, createBtn,
    EmptyPlaceholder, DiscountDialog, FilterTool, MoreOpeator, batchCreateDialog },
  filters: {
    standardFormat,
    settlementStatusFilter,
    costApprovalStatus },
  mixins: [
    isAdmin,
    costSet,
    costOperate],
  props: {
    projectId: {
      type: Number,
      default: null
    },
    detailData: {
      type: Object,
      default: () => {
        return null;
      }
    }
  },
  data() {
    return {
      icon1,
      setting,
      paramsObj: {},
      isShow: 0,
      costOption: [],
      page: 1,
      perPage: 20,
      list: {
        items: [],
        page: 1,
        perPage: 20,
        total: 0,
        isInint: true
      },
      costNumList: [],
      isSubmit: false,
      costId: null,
      btnLoading: false,
      isShowFilter: false,
      supplierName: '',
      multipleSelection: [],
      rangeKeyArr: [{
        attr: 'createTime',
        start: 'createStart',
        end: 'createEnd',
        type: 'time'
      }]
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage,
      'userInfo': state => state.user.userInfo
    }),
    costAuth() {
      return (hasRouteAuth('crm:projectInfo:costRead') || hasRouteAuth('crm:projectInfo:costAdmin') || this.isAdmin);
    },
    filterList() {
      const arr = [
        // 输入框
        { keyword: 'costExplain', name: '说明', labelWidth: '70px', type: 'input' },
        { keyword: 'supplier', name: '供应商', labelWidth: '70px', type: 'input' },
        { keyword: 'creator', name: '创建人', labelWidth: '70px', type: 'input' },
        // 下拉
        { keyword: 'costItemId', name: '成本项', type: 'select', options: this.costOption },
        // 日期
        { keyword: 'createTime', name: '创建时间', labelWidth: '70px', timeType: 'daterange', type: 'rangeDate' }
      ];
      return arr;
    }
  },
  created() {
    this.getCost();
    this.fetchData(false);
  },
  methods: {
    hasRouteAuth,
    bigDataFilter,
    moneyFilter,
    toProjectChildDetail(row) {
      const url = this.$router.resolve({
        name: 'projectChildDetail',
        params: { id: row.orderObj.id }
      });
      window.open(url.href, '_blank');
    },
    getCost() {
      const params = {
        page: 1,
        perPage: 100,
        costBelong: 1
      };
      costList(params).then(res => {
        if (res.data && res.data.items) {
          res.data.items.forEach(i => {
            i.value = i.costId;
            i.label = i.costName;
          });
          this.costOption = [{ value: -1, label: '全部' }, ...res.data.items];
        }
      });
    },
    fetchData(reset = false) {
      this.getCostNum();
      if (reset) this.page = 1;
      const params = JSON.parse(JSON.stringify(this.paramsObj));
      paramsRangeFormat(this.rangeKeyArr, params);
      params.isShow = this.isShow;
      params.page = this.page;
      params.perPage = this.perPage;
      getCostList(this.projectId, params).then(res => {
        this.list = res.data;
        this.list.isInit = false;
        this.listLoading = false;
        this.page = res.data.page;
        this.perPage = res.data.perPage;
      }).catch(e => {
        console.error(e);
      });
    },
    queryClick() {
      this.fetchData(true);
    },
    queryEmpty() {
      this.paramsObj = {};
      this.fetchData(true);
    },
    getCostNum() {
      getCostNum(this.projectId).then(res => {
        res.data.forEach((i, index) => {
          i.icon = this[`icon${index + 1}`];
          i.num = Math.round(i.num * 100) / 100;
        });
        this.costNumList = res.data;
      });
    },
    handleSizeChange(val) {
      this.perPage = val;
      // this.isShowFilter = false;
      this.fetchData(true);
    },
    handleCurrentChange(page) {
      this.page = page;
      // this.isShowFilter = false;
      this.fetchData();
    },
    addCostItem() {
      this.$refs.createIncomeDialog.dialogVisible = true;
    },
    toEdit(scope) {
      this.costId = scope.row.id;
      if (this.$refs.createIncomeDialog) this.$refs.createIncomeDialog.dialogVisible = true;
      if (this.$refs.createIncomeDialog) this.$refs.createIncomeDialog.initInfo(scope.row);
    },
    addItem(param) {
      this.btnLoading = true;
      costAdd(this.projectId, param).then(res => {
        this.btnLoading = false;
        this.isSubmit = false;
        if (res.code === 200) {
          if (this.$refs.createIncomeDialog) this.$refs.createIncomeDialog.handleSuccess(1);
          this.$emit('getDetail');
        }
      }).catch((e) => {
        this.isSubmit = false;
        this.btnLoading = false;
      });
    },
    editItem(param) {
      this.btnLoading = true;
      costEdit(this.costId, param).then(res => {
        this.btnLoading = false;
        this.isSubmit = false;
        if (res.code === 200) {
          if (this.$refs.createIncomeDialog) this.$refs.createIncomeDialog.handleSuccess(0);
          this.$emit('getDetail');
        }
      }).catch((e) => {
        this.isSubmit = false;
        this.btnLoading = false;
      });
    },
    success() {
      this.fetchData();
    },
    toDel(scope) {
      this.$confirm('是否确定删除该成本项', {
        confirmButtonText: '确定',
        type: 'warning',
        showClose: false,
        center: true,
        iconClass: 'charge-icon',
        customClass: 'del-message del-message-cancel'
      }).then(() => {
        costDel(scope.row.id).then(res => {
          this.$message.success('删除成功');
          this.fetchData();
          this.$emit('getDetail');
        }).catch(err => {
          console.error(err);
        });
      }).catch(() => {
        return false;
      });
    },
    showSupplier() {
      this.isShowFilter = false;
      this.paramsObj = {};
      this.fetchData(true);
    },
    toCostList(scope) {
      this.isShowFilter = true;
      this.$set(this.paramsObj, 'supplier', scope.row.supplier.name);
      this.isShow = 0;
      this.fetchData(true);
    },
    toOrderList(scope) {
      this.$emit('getOrderList', scope.row.supplier.name);
    },
    toEditDiscount(scope) {
      this.supplierName = scope.row.supplier ? scope.row.supplier.name : '--';
      this.$refs.discountDialog.dialogVisible = true;
      this.$refs.discountDialog.initInfo({ supplierId: scope.row.supplier ? scope.row.supplier.id : null, discount: scope.row.discount, isAuto: scope.row.isAuto, originalDiscount: scope.row.originalDiscount });
      if (!(scope.row.discount || scope.row.discount === 0)) {
        this.$refs.discountDialog.costPlaceholder = '没有设置可抵扣税率';
      }
    },
    getDetail() {
      this.$emit('getDetail');
    },
    /** 批量操作 */
    freshData() {
      this.fetchData();
      this.$emit('getDetail');
    },
    handleSelectionChange(value) {
      this.multipleSelection = value;
    },
    moreOpeatorClick(i) {
      if (i.label === '批量新增') {
        this.$refs.batchCreateDialogRef.openDialog();
      } else if (i.label === '批量编辑') {
        let listData = [];
        if (this.multipleSelection.length <= 0) {
          if (this.list && this.list.items) listData = this.list.items;
        } else {
          listData = JSON.parse(JSON.stringify(this.multipleSelection));
        }
        if (listData.length === 0) {
          this.$message.warning('没有可编辑的项');
          return;
        }
        listData = listData.filter(item => {
          return !item.orderObj && (item.projectStr !== '外部媒介' || item.projectStr !== '内部媒介');
        });
        this.$refs.batchCreateDialogRef.openDialog(listData, true);
      } else if (i.label === '批量删除') {
        this.batchDelete();
      }
    },
    batchDelete() {
      if (this.multipleSelection.length <= 0) {
        this.$message.warning('请选择需要删除的项');
        return;
      }
      const ids = this.multipleSelection.map(i => i.id).join(',');
      this.$confirm('是否确定删除这些成本项', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        center: true,
        type: 'warning',
        customClass: ' del-message del-message-cancel',
        iconClass: 'del-icon'
      }).then(() => {
        const data = { ids };
        batchDeleteCost(data).then(res => {
          this.$message.success('删除成功');
          this.freshData();
        }).catch(err => {
          console.error(err);
        });
      });
    },
    selectable(row, event) {
      return !row.orderObj && (row.projectStr !== '外部媒介' || row.projectStr !== '内部媒介');
    },

    // 跳转到供应商结算页 id: 供应商id, costItemId:传成本项id，costId:成本id，relatedOrderId:关联订单id, name: 成本项名称， orderId: 订单编号
    toSettlement(item) {
      const { id, costItemId, costItemName, supplier } = item;
      if (!supplier || !supplier.id) {
        this.$message.warning('该成本未填供应商，无法发起结算');
        return false;
      }
      let routeUrl = null;
      routeUrl = this.$router.resolve({
        name: 'supplierCreate', // supplierDetail
        query: {
          id: supplier.id, // 供应商id，查找信息
          // （第一步）成本选择阶段
          costItemId: costItemId, // 成本项id，选中该成本项
          name: costItemName, // 成本项名称，选中该成本项
          // （第二步）审核项选择阶段
          relatedOrderId: this.detailData.id,
          costId: id, // 成本id，选中该成本
          orderId: this.detailData.projectNum || '', // 订单编号，查找该订单，并选中该订单
          costBelong: 1, // 成本归属，选中该成本归属，1代表项目订单

          otherDetail: '1'
        }
      });
      if (routeUrl) window.open(routeUrl.href, '_blank');
    },
    toCostDetail(row) {
      const url = this.$router.resolve({
        name: 'costDetail',
        params: { id: row.id }
      });
      window.open(url.href, '_blank');
    },
    handelDataList(arr) {
      return arr.map(i => {
        return {
          label: i.name,
          data: i.num / 100,
          icon: i.icon || this.icon1
        };
      });
    }
  }
};
</script>
<style lang="scss">
.project-cost {
  .statistics-total {
    margin-top: 20px;
    margin-bottom: 10px;
  }
  .fb-table {
    .order-id {
      color: #406EFF;
    }
  }
  .light-word {
    color: #406eff;
    cursor: pointer;
  }
}
.project-cost-data-list {
  margin-left: 16px;
}
.mobile-tool {
  display: flex;
  margin-bottom: 10px;
}
</style>
<style lang="scss">
.dropdown-wrap {
  margin-top: -24px;
  margin-right: 15px;
  padding: 0;
    .el-dropdown-menu__item {
      width: 100px !important;
      text-align: center !important;
    }
}
</style>
